
<html xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>

<style>
    .topdiv {
        height: 50px;
    }

    tr {
        height: 50px;
    }

    td {
        border: 1px black solid;
        text-align: center;

    }
    *{
        margin: 0 auto;
    }
    .layui-timeline {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 20px 0;
    }

    .layui-timeline-item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .layui-timeline-title {
        margin-top: 10px;
    }

    .layui-timeline-line {
        position: absolute;
        width: 100%;
        height: 2px;
        top: 8px;
        background-color: #e6e6e6;
    }
    .layui-input-wrap{
        border:  2px solid;
    }
</style>
<body id="bd1">
<div style="width: 1100px;height: 750px;padding-left: 50px;">
    <div  id="divimg" style="cursor:zoom-out;background: rgba(0,0,0,.6);width:100%;height:100%;position: absolute;z-index: 9999;left: 0;top: 0;display: none">
        <img style="width: 400px;height:400px;left: 381px;top:312px;position: absolute;">
    </div>
    <input style="display: none" th:value="${id}" id="pid">
    <div class="topdiv"><strong>附件1</strong>
    </div>
    <div class="topdiv" style="text-align: center;font-size: 25px;font-weight: 400"> <span id="">
					365推送单
				</span></div>
    <div class="topdiv" style="justify-content: space-between;display: flex;">
        <div>
            <span>编号</span>
            <span th:text="${id}">编号</span>
        </div>
        <div>
            <span>日期</span>
            <span th:text="${#dates.format(reportDate, 'yyyy-MM-dd')}"></span>
            <a id="downloadBtn" class="layui-btn layui-btn-xs" lay-event="download">下载</a>
            <a class="layui-btn layui-btn-xs" lay-event="print" onclick="printPage()">打印</a>
        </div>
    </div>
    <table style="border-collapse:collapse;width: 1100px">
        <tr>
            <td>客户姓名</td>
            <td th:text="${threeSixFivePushModel.name}"></td>
            <td>客户性别</td>
            <td th:text="${threeSixFivePushModel.sex}"></td>
        </tr>
        <tr>
            <td>客户手机号</td>
            <td colspan="5" th:if="${threeSixFivePushModel.vestedEmployee == username}" th:text="${threeSixFivePushModel.phone}"></td>
            <td colspan="5" th:if="${threeSixFivePushModel.vestedEmployee != username}"  th:text="'*******' + ${#strings.substring(threeSixFivePushModel.phone, threeSixFivePushModel.phone.length() - 4)}"></td>
        </tr>
        <tr>
            <td>客户微信号</td>
            <td colspan="5" th:if="${threeSixFivePushModel.vestedEmployee == username}" th:text="${threeSixFivePushModel.wechatAccount}"></td>
            <td colspan="5" th:if="${threeSixFivePushModel.vestedEmployee != username}" th:text="'***********'"></td>
        </tr>
        <tr>
            <td>客户软件账号</td>
            <td colspan="5" th:if="${threeSixFivePushModel.vestedEmployee == username}" th:text="${threeSixFivePushModel.softwareAccount}"></td>
            <td colspan="5" th:if="${threeSixFivePushModel.vestedEmployee != username}" th:text="'******'"></td>
        </tr>
        <tr>
            <td>客户归属员工</td>
            <td colspan="5" th:text="${threeSixFivePushModel.vestedEmployee}"></td>
        </tr>
        <tr>
            <td>客户支付方式</td>
            <td colspan="5" th:text="${threeSixFivePushModel.paymentMethod}"></td>
        </tr>
        <tr>
            <td>客户支付时间</td>
            <td colspan="5" th:text="${threeSixFivePushModel.paymentTime}"></td>
        </tr>
        <tr>
            <td>加好友时间</td>
            <td colspan="5" th:text="${threeSixFivePushModel.addFriendDate}"></td>
        </tr>
        <tr>
            <td>客户情况</td>
            <td colspan="5" th:text="${threeSixFivePushModel.customerSituation}"></td>
        </tr>
    </table>
</div>
</body>



<!--打印/下载-->
<script>
    function printPage() {
        window.print();
    }


    document.getElementById("downloadBtn").addEventListener("click", function() {
        // 获取需要截屏的容器和其滚动高度
        const container = document.body;
        const scrollHeight = container.scrollHeight;

        // 设置每次滚动的高度
        const scrollStep = 2000; // 每次滚动的高度

        // 创建一个画布，用于绘制拼接后的图片
        const canvas = document.createElement('canvas');
        canvas.width = container.offsetWidth;
        canvas.height = scrollHeight;

        // 获取画布的上下文
        const context = canvas.getContext('2d');

        // 定义一个异步函数，用于逐步滚动、截取和拼接内容
        async function scrollAndCapture(scrollPosition) {
            // 滚动到指定位置
            container.scrollTop = scrollPosition;

            // 等待一段时间，确保内容加载完成
            await new Promise(resolve => setTimeout(resolve, 500));

            // 截取当前位置的内容
            const screenshot = await html2canvas(container);

            // 绘制截图到画布上指定位置
            context.drawImage(screenshot, 0, scrollPosition);

            // 判断是否还有剩余内容需要截取
            if (scrollPosition + container.offsetHeight < scrollHeight) {
                // 继续滚动并截取下一部分内容
                await scrollAndCapture(scrollPosition + scrollStep);
            } else {
                // 所有内容都已截取完成，生成最终的图片
                const finalScreenshot = canvas.toDataURL('image/png');

                // console.log('Sending image: ', finalScreenshot);

                // // 发送POST请求
                // $.ajax({
                //     url: '/download-to-word',
                //     type: 'POST',
                //     data: JSON.stringify({ image: finalScreenshot }),
                //     contentType: 'application/json; charset=utf-8',
                //     dataType: 'json',
                //     success: function(response) {
                //         console.log('图片发送成功');
                //     },
                //     error: function(xhr, status, error) {
                //         console.error('发生错误', status, error);
                //     }
                // });


                // 创建一个链接元素
                var link = document.createElement("a");
                link.href = finalScreenshot;
                link.download = "scrollable-content.png"; // 下载的文件名
                // 触发点击事件以下载图片
                link.click();
            }
        }

        // 开始滚动截取内容
        scrollAndCapture(0);
    });

</script>


</html>